<style lang="less" scoped>
.notice {
  .ivu-tabs-bar {
    margin: 0;
  }
  .smallForm {
    display: inline-block;
  }
}
</style>


<template>
  <div class="notice">
    <Card :bordered="false">
      <p slot="title"
         class="white">资讯管理 > <span class="select-font">通告管理</span>
      </p>
      <div>
        <Button type="primary"
                @click.native="addNotice">新增通告</Button>
        <Button type="error"
                @click.native="del1"
                style="margin-left: 20px">删除通告</Button>
        <Form :model="searchItem"
              class="smallForm">
          <Input v-model="searchItem.name"
                 style="width:200px;margin-left: 20px"
                 :maxlength="30"
                 placeholder="请输入通告标题" />
        </Form>
        <Button type="info"
                style="margin-left:20px"
                @click="getNotice('1')">搜索</Button>
      </div>
    </Card>
    <Tabs @on-click="changeTab">
      <TabPane label="已发送的通告"
               name="已发送的通告">
        <Table :data="noticeData"
               @on-selection-change="showSelect"
               :columns="noticeColumns"
               stripe></Table>
        <Page class="pull-right"
              :total="Page.total"
              :current="Page.current"
              :page-size="Page.pageSize"
              size="small"
              show-total
              @on-change="changePage"></Page>
      </TabPane>
      <TabPane label="已收到的通告"
               name="已收到的通告">
        <Table :data="noticeData"
               @on-selection-change="showSelect"
               :columns="noticeColumns2"
               stripe></Table>
        <Page class="pull-right"
              :total="Page.total"
              :current="Page.current"
              :page-size="Page.pageSize"
              size="small"
              show-total
              @on-change="changePage"></Page>
      </TabPane>
    </Tabs>

    <Modal class="notice-modal"
           :mask-closable="false"
           title="通告"
           width="600"
           v-model="noticeModal">
      <Form :label-width="70"
            :model="noticeItem"
            :rules="rules">
        <Form-item label="标题"
                   prop="title">
          <Input v-model="noticeItem.title"
                 :maxlength="35"></Input>
        </Form-item>
        <Form-item label="正文"
                   prop="text">
          <Input v-model="noticeItem.text"
                 :maxlength="500"
                 type="textarea"></Input>
        </Form-item>
        <Form-item label="接收部门"
                   prop="dep_name">
          <Cascader :data="areaArr"
                    placeholder="请选择部门"
                    @on-change="showAddress"
                    v-model="noticeItem.dep_name"></Cascader>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button v-if="btnSave"
                type="primary"
                @click="newNotice">保存</Button>
        <Button v-if="!btnSave"
                type="primary"
                @click="send">修改重发</Button>
        <Button @click="cancel">取消</Button>
      </div>
    </Modal>
    <Modal title="通告"
           width="600"
           v-model="noticeModal2"
           :mask-closable="false">
      <Form :label-width="60">
        <Form-item label="标题"
                   prop="title">
          <Input v-model="noticeItem.title"
                 readonly></Input>
        </Form-item>
        <Form-item label="正文"
                   prop="text">
          <Input v-model="noticeItem.text"
                 readonly></Input>
        </Form-item>
        <Form-item label="接收部门"
                   prop="dep_name">
          <Cascader :data="areaArr"
                    disabled
                    style="width:60%"
                    v-model="noticeItem.dep_name"></Cascader>
        </Form-item>
        <!--  <Table :data="noticeDaoru" v-if="noticeDaoru.length > 0" :columns="noticeDaoruColumns2" stripe></Table>   -->
      </Form>
    </Modal>
    <del-modal ref="delModal"
               title='通告'
               @del="delNotice"
               :delArr="selectData"
               :url="urlNoticeDel"></del-modal>
    <Modal v-model="userModal"
           title="查看已经阅读人员"
           width="600">
      <Table :data="userData"
             :columns="userColumns"
             stripe></Table>
    </Modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'components/public/delModal';
export default {
  data() {
    return {
      urlNoticeList: '/sys/notice/list',
      urlNoticeNew: '/sys/notice/new',
      urlNoticeDel: '/sys/notice/del',
      urlAddressList: '/sys/department/getTree',
      urlRead: '/sys/notice/read',
      urlNoticeEdit: '/sys/notice/new',
      searchForm: {},
      seacrh: '',
      noticeData: [],
      searchItem: {
        name: '',
      },
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        text: [{ required: true, message: '正文不能为空', trigger: 'blur' }],
        dep_name: [
          {
            required: true,
            type: 'array',
            message: '请选择接受部门',
            trigger: 'change',
          },
        ],
      },
      noticeColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '标题',
          key: 'title',
        },
        {
          title: '发送人',
          key: 'realname',
        },
        {
          title: '接受部门',
          key: 'dep_name',
        },
        {
          title: '发送日期',
          key: 'send_date',
        },
        {
          title: '正文',
          key: 'text',
        },
        {
          title: '操作',
          render: (h, param) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.edit(param.row);
                    },
                  },
                },
                '修改重发'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.userModal = true;
                      this.userData = param.row.receive_users;
                    },
                  },
                },
                '查看已经阅读人员'
              ),
            ]);
          },
        },
      ],
      noticeColumns2: [
        {
          title: '标题',
          key: 'title',
        },
        {
          title: '发送人',
          key: 'realname',
        },
        {
          title: '接受部门',
          key: 'dep_name',
        },
        {
          title: '发送日期',
          key: 'send_date',
        },
        {
          title: '正文',
          key: 'text',
        },
        {
          title: '操作',
          render: (h, param) => {
            let read = false;
            for (let i = 0; i < param.row.receive_users.length; i++) {
              if (
                param.row.receive_users[i].username ==
                storage.session.get('username')
              ) {
                if (param.row.receive_users[i].is_receive == '0') {
                  read = false;
                } else {
                  read = true;
                }
                break;
              } else {
                read = true;
              }
            }
            if (!read) {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.edit2(param.row);
                      },
                    },
                  },
                  '查看详细信息'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'info',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        let params = {
                          data: {
                            _id: param.row._id,
                          },
                          url: this.urlRead,
                          token: storage.session.get('token'),
                          success: res => {
                            if (res.data.code == '0000') {
                              this.$Message.success({
                                content: '确认阅读',
                              });
                              this.getNotice(1, 2);
                            } else {
                              this.$Message.warning({
                                content: res.data.message,
                              });
                            }
                          },
                        };
                        ajaxPost(params);
                      },
                    },
                  },
                  '确认已读'
                ),
              ]);
            } else {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.edit2(param.row);
                      },
                    },
                  },
                  '查看详细信息'
                ),
              ]);
            }
          },
        },
      ],
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      noticeModal: false,
      noticeModal2: false,
      daoruUrl: '',
      noticeDaoru: [],
      noticeDaoruColumns: [
        {
          title: '文件名',
          key: 'filename',
        },
        {
          title: '操作',
          render: (h, param) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.delDaoRu(param.row.path, param.index);
                    },
                  },
                },
                '删除'
              ),
            ]);
          },
        },
      ],
      noticeDaoruColumns2: [
        {
          title: '文件名',
          key: 'filename',
        },
        {
          title: '操作',
          render: (h, param) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.download(param.row);
                    },
                  },
                },
                '下载附件'
              ),
            ]);
          },
        },
      ],
      actionPage: '1',
      totalSize: '',
      noticeItem: {
        title: '',
        text: '',
        dep_name: [],
      },
      btnSave: true,
      areaArr: [],
      addressData: [],
      modal2: false,
      selectData: [],
      old_id: '',
      userData: [],
      userColumns: [
        {
          title: '姓名',
          key: 'realname',
        },
        {
          title: '职位',
          key: 'position',
        },
        {
          title: '是否阅读',
          align: 'center',
          render: (h, params) => {
            if (params.row.is_receive == '0') {
              return h('div', {}, '未读');
            } else if (params.row.is_receive == '1') {
              return h('div', {}, '已读');
            }
          },
        },
      ],
      userModal: false,
      type: '1',
    };
  },
  methods: {
    download(row) {
      window.open(row.path);
    },
    changeTab(name) {
      this.searchItem.name = '';
      if (name === '已发送的通告') {
        this.getNotice();
      } else if (name === '已收到的通告') {
        this.getNotice(this.actionPage, 2);
      }
    },
    addNotice() {
      this.noticeModal = true;
      this.noticeItem.title = '';
      this.noticeItem.text = '';
      this.noticeDaoru = [];
      this.noticeItem.dep_name = [];
      this.addressData = [];
    },
    changePage(page) {
      this.actionPage = page;
      this.getNotice(page, this.type);
    },
    getNotice(page = 1, type = 1) {
      this.type = type;
      let params = {
        data: {
          searchValue: {},
          order: { send_date: -1 },
          page,
          pageSize: this.Page.pageSize,
        },
        url: this.urlNoticeList,
        token: storage.session.get('token'),
        success: res => {
          this.noticeData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
          this.totalSize = res.data.result.totalSize;
        },
      };
      if (type == '2') {
        params.data.searchValue.dep_name = storage.session.get('dep_name');
      } else if (type == '1') {
        params.data.searchValue.username = storage.session.get('username');
      }
      if (this.searchItem.name !== '') {
        params.data.searchValue.title = `${this.searchItem.name}|#|like`;
      }
      ajaxPost(params);
    },
    newNotice() {
      let dep_name = this.addressData[this.addressData.length - 1];
      let params = {
        data: {
          title: this.noticeItem.title,
          text: this.noticeItem.text,
          dep_name,
          dep_array: this.addressData,
        },
        token: storage.session.get('token'),
        url: this.urlNoticeNew,
        success: res => {
          if (res.data.code == '0000') {
            this.$Message.success({
              content: '发送通告成功',
            });
            this.noticeModal = false;
            this.$Loading.finish();
            this.getNotice(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择通告');
      }
    },
    delNotice() {
      this.selectData = [];
      this.getNotice(this.actionPage);
    },
    edit(row) {
      this.btnSave = false;
      this.noticeModal = true;
      this.noticeItem.title = row.title;
      this.noticeItem.text = row.text;
      this.noticeItem.dep_name = row.dep_array;
      this.addressData = row.dep_array;
      this.old_id = row._id;
    },
    edit2(row) {
      this.noticeModal2 = true;
      this.noticeItem.title = row.title;
      this.noticeItem.text = row.text;
      this.noticeItem.dep_name = row.dep_array;
    },
    cancel() {
      this.noticeModal = false;
    },
    getAddress() {
      let that = this;
      let params = {};
      params.data = {};
      params.data.searchValue = {
        type: '0',
      };
      params.token = storage.session.get('token');
      params.url = this.urlAddressList;
      params.success = function (res) {
        that.areaArr = res.data.result;
      };
      ajaxPost(params);
    },
    showAddress(data) {
      this.addressData = data;
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    send() {
      let dep_name = this.addressData[this.addressData.length - 1];
      let params = {
        data: {
          title: this.noticeItem.title,
          text: this.noticeItem.text,
          dep_name,
          dep_array: this.addressData,
          old_id: this.old_id,
        },
        token: storage.session.get('token'),
        url: this.urlNoticeEdit,
        success: res => {
          if (res.data.code == '0000') {
            this.$Message.success({
              content: '发送通告成功',
            });
            this.noticeModal = false;
            this.$Loading.finish();
            this.getNotice(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
  },
  mounted() {
    this.getNotice();
    this.getAddress();
  },
  components: {
    'del-modal': delModal,
  },
};
</script>
